<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=EmulateIE7">
    <style type="text/css">
        body{
            color:white;
            text-algin:center;
            background:#141414;
        }
        #containter{
            margin:40px auto 0;
            width:152px;
            background:#141414;
        }
        #restart{
            float:left;
            cursor:pointer;
            margin-right:20px;
            width:80px;
            height:20px;
            font:12px "宋体";
            text-align:center;
            line-height:20px;
            vertical-align:middle;
            background:#a22024;
        }
        input{
            margin-right:20px;
            width:20px;
            border:1px solid #82a500;
        }
        .box{
            display:inline;
            overflow:hidden;
            float:left;
            margin:1px;
            width:24px;
            height:24px;
            cursor:pointer;
            font:18px/24px Arial;
            text-align:center;
            background:#82a500;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
<a id="restart" onclick="javascirpt:game.init();">重新开始</a>
<label>行3-30</label><input id="rawCount" type="text" /><label>列3-30</label><input id="colCount" type="text" /><label>雷</label><input id="mineCount" type="text" />
<div id="containter"></div>
</body>
</html>
<script type="text/javascript">
function ClearMine()
{
    // 私有属性
    var def_Raw = 8;
    var def_Col = 8;
    var def_Count = 10;

    var m_raw;
    var m_col;
    var m_count;
    var m_total;
    var openCount = 0;

    // 初始化
    this.init = function()
    {
        m_raw = document.getElementById("rawCount").value || def_Raw;
        m_col = document.getElementById("colCount").value || def_Col;
        m_count = document.getElementById("mineCount").value || def_Count;
        m_total = m_raw * m_col;

        if (m_raw < 3 || m_raw > 30 || m_col < 3 || m_col > 30 || m_count < 1 || m_count > m_total)
        {

            alert("输入有误");
            return;
        }

        // 重新清0
        openCount = 0;
        try{
            m_position = new Array(m_total);
        } catch (e)
        {
            alert("输入有误");
            return;
        }

        // 布局
        this.setLayout();
        this.setMine();

        var cont = document.getElementById("containter");
        var boxWidth = cont.getElementsByTagName("a")[0].offsetWidth;
        cont.style.width = (boxWidth + 2) * m_col + "px"; // 2 = margin-left + margin-right
    }

    // 设置页面
    this.setLayout = function()
    {
        var layout = "";
        for (i = 0; i < m_total; i++)
        {
            layout += "<a class='box' onclick='javascript:game.process(game.getLocation(this));' oncontextmenu='javascript:game.rightClick(game.getLocation(this));return false;'></a>";
        }
        layout += "<div class='clear'></div>";

        document.getElementById("containter").innerHTML = layout;
    }

    // 设置雷局
    this.setMine = function()
    {
        for (i = 0; i < m_count; i++)
        {
            var location = parseInt(Math.random() * m_total);
            while (m_position[location] == -1)
            {
                location = parseInt(Math.random() * m_total);
            }
            m_position[location] = -1;


        }

        for (i = 0; i < m_total; i++)
        {
            m_position[i] = this.getAmount(i);
        }
    }

    // 点击处理
    this.process = function(n)
    {
        if (m_position[n] > 0)
        {
            this.setIcon(n);
            if (m_total - m_count <= ++openCount)
                this.win();
        }
        else if (m_position[n] == 0)
        {
            var x = n % m_col;
            var y = parseInt(n / m_col);
            this.extendOut(x, y);
        }
        if (m_position[n] == -1)
        {
            for (i = 0; i < m_total; i++)
            {
                if (m_position[i] == -1)
                {
                    this.setIcon(i);
                }
                else
                {
                    m_position[i] = -2;
                }
            }
        }
    }

    // 右击
    this.rightClick = function(n)
    {
        if (this.getElement(n).innerHTML == "")
            this.getElement(n).innerHTML = "▲";
        else if (this.getElement(n).innerHTML == "▲")
            this.getElement(n).innerHTML = "?";
        else if (this.getElement(n).innerHTML == "?")
            this.getElement(n).innerHTML = "";
    }

    // 设置雷格图标
    this.setIcon = function(n)
    {
        this.getElement(n).innerHTML = (m_position[n] == -1) ? "●" : m_position[n];
        m_position[n] = -2;

        this.getElement(n).style.background = "#aeaeae";
    }

    // 周边雷的个数
    this.getAmount = function(n)
    {
        var x = n % m_col;
        var y = parseInt(n / m_col);

        if (m_position[x + y * m_col] == -1)
            return -1;

        var amount = 0;
        for (var i = (y - 1) > 0 ? (y - 1) : 0; i < ((y + 2) > m_raw ? m_raw : (y + 2)); i++)
            for (var j = (x - 1) > 0 ? (x - 1) : 0; j < ((x + 2) > m_col ? m_col : (x + 2)); j++)
            {
                if (m_position[j + i * m_col] == -1)
                    amount++;
            }

        return amount;
    }

    // 点击的位置(第n个雷)
    this.getLocation = function(obj)
    {
        var el = document.getElementById("containter").getElementsByTagName("a");
        for (i = 0; i < el.length; i++)
        {
            if (el[i] == obj)
            {
                return i;
            }
        }
    }

    // 获取元素
    this.getElement = function(n)
    {
        return document.getElementById("containter").getElementsByTagName("a")[n];
    }

    // 位置合法性
    this.isLegle = function(x, y)
    {
        if (x < 0 || x >= m_col ||
                y < 0 || y >= m_raw)
        {
            return false;
        }

        return true;
    }

    // 展开
    this.extendOut = function(x, y)
    {
        var n = y * m_col + x;
        if (this.isLegle(x, y))
        {
            if (m_position[n] == 0)
            {
                this.setIcon(n);

                if (this.isLegle(x - 1, y) && (m_position[y * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y);
                if (this.isLegle(x - 1, y - 1) && (m_position[(y - 1) * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y - 1);
                if (this.isLegle(x - 1, y + 1) && (m_position[(y + 1) * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y + 1);
                if (this.isLegle(x, y - 1) && (m_position[(y - 1) * m_col + x] != -2))
                    this.extendOut(x, y - 1);
                if (this.isLegle(x, y + 1) && (m_position[(y + 1) * m_col + x] != -2))
                    this.extendOut(x, y + 1);
                if (this.isLegle(x + 1, y + 1) && (m_position[(y + 1) * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y + 1);
                if (this.isLegle(x + 1, y) && (m_position[y * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y);
                if (this.isLegle(x + 1, y - 1) && (m_position[(y - 1) * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y - 1);

                openCount++;
            }
            else if (m_position[n] != -1)
            {
                this.setIcon(n);

                openCount++;
            }

            if (m_total - m_count <= openCount)
                this.win();
        }

        return;
    }

    // 显示赢了
    this.win = function()
    {
        for (i = 0; i < m_total; i++)
        {
            if (m_position[i] == -1)
                this.getElement(i).innerHTML = "▲";
        }
        alert("你赢了");
    }
}

var game = new ClearMine();
game.init();
</script>